<template>
  <div class="testimonial-carousel">
    <div class="testimonial-container">
      <div v-for="(slide, index) in slides" :key="index" 
           class="testimonial-slide" 
           v-show="currentIndex === index">
        <slot :slide="slide" :index="index"></slot>
      </div>
    </div>

    <div class="testimonial-controls">
      <button @click="prev" class="testimonial-control prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>
      <button @click="next" class="testimonial-control next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </button>
    </div>

    <div class="testimonial-indicators">
      <button
        v-for="(slide, index) in slides"
        :key="index"
        @click="goToSlide(index)"
        :class="['testimonial-indicator', { active: currentIndex === index }]">
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueCarousel1',
  props: {
    slides: {
      type: Array,
      required: true,
      default: () => []
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 3000
    },
    pauseOnHover: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: null,
      isHovered: false
    }
  },
  mounted() {
    this.startAutoplay();
    
    if (this.pauseOnHover) {
      const container = this.$el;
      container.addEventListener('mouseenter', this.handleMouseEnter);
      container.addEventListener('mouseleave', this.handleMouseLeave);
    }
  },
  beforeDestroy() {
    this.stopAutoplay();
    
    if (this.pauseOnHover) {
      const container = this.$el;
      container.removeEventListener('mouseenter', this.handleMouseEnter);
      container.removeEventListener('mouseleave', this.handleMouseLeave);
    }
  },
  methods: {
    startAutoplay() {
      if (this.autoplay && this.slides.length > 1 && !this.isHovered) {
        this.timer = setInterval(() => {
          this.next();
        }, this.interval);
      }
    },
    stopAutoplay() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    handleMouseEnter() {
      this.isHovered = true;
      this.stopAutoplay();
    },
    handleMouseLeave() {
      this.isHovered = false;
      this.startAutoplay();
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length;
      this.$emit('slide-change', this.currentIndex);
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
      this.$emit('slide-change', this.currentIndex);
    },
    goToSlide(index) {
      this.currentIndex = index;
      this.$emit('slide-change', this.currentIndex);
    }
  }
}
</script>

<style scoped>
.testimonial-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.testimonial-container {
  position: relative;
  width: 100%;
  min-height: 200px;
}

.testimonial-slide {
  position: relative;
  width: 100%;
  transition: opacity 0.5s ease;
}

.testimonial-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 2;
}

.testimonial-control {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  color: #fff;
}

.testimonial-control:hover {
  background: rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

.testimonial-indicators {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

.testimonial-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.testimonial-indicator:hover {
  transform: scale(1.2);
}

.testimonial-indicator.active {
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .testimonial-control {
    width: 30px;
    height: 30px;
  }
  
  .testimonial-indicator {
    width: 8px;
    height: 8px;
  }
}
</style>